<template>
	<my-page :is-tabbar="true" :tab-key="0" title="瑞安国企资产小程序—瑞安国企资产e租" :is-back="false">
		<!-- 轮播图 -->
		<view class="banner">
			<view class="search-box" @click="handleSearch">
				<view class="search-input-container">
					<text class="iconfont icon-search"></text>
					<text type="text" class="search-input">请输入房屋名称/地区筛选</text>
					<text class="search-btn">搜索</text>
				</view>
			</view>
			<view class="banner-content">
				<view class="slogan-container">
					<text class="slogan">地图找房，轻松租房</text>
					<text class="sub-slogan">就来瑞安国企资产小程序—“瑞安国企资产e租”</text>
				</view>
				<image class="banner-img" src="/static/images/login_logo.png" mode="widthFix"></image>
			</view>
		</view>
		
		<!-- 分类导航 -->
		<view class="category-card">
			<view class="category-nav">
				<view class="category-item" v-for="(item, index) in categoryList" :key="index" @click="handleCategoryClick(item)">
					<image class="category-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="category-name">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<my-picker
				:data="typeFilterData"
				v-model="filterParams.type"
				title="选择类型"
				placeholder="类型"
				:clearable="true"
				class="filter-picker"
				@change="handleTypeChange"
			></my-picker>
			
			<my-picker
				:data="priceFilterData"
				v-model="priceFilterValue"
				title="选择出租价格范围"
				placeholder="出租价"
				:clearable="true"
				class="filter-picker"
				@change="handlePriceChange"
			></my-picker>
			
			<my-picker
				:data="areaFilterData"
				v-model="areaFilterValue"
				title="选择面积范围"
				placeholder="面积"
				:clearable="true"
				class="filter-picker"
				@change="handleAreaChange"
			></my-picker>
			
			<my-picker
				:data="regionFilterData"
				v-model="filterParams.streetName"
				title="选择区域"
				placeholder="区域"
				:clearable="true"
				class="filter-picker"
				@change="handleRegionChange"
			></my-picker>
			<view class="iconfont icon-filter-records-fill filter" @click="showFilterPopup"></view>
		</view>
		
		<!-- 底部筛选弹窗 -->
		<uni-popup ref="filterPopup" type="bottom">
			<view class="filter-popup">
				<view class="filter-popup-header">
					<text>筛选</text>
					<text class="close-btn" @click="closeFilterPopup">关闭</text>
				</view>
				<view class="filter-popup-content">
					<!-- <view class="filter-item">
						<text class="filter-label">出租价排序</text>
						<my-picker
							:data="sortData"
							v-model="popupFilterParams.rentSort"
							title="选择出租价排序"
							placeholder="选择排序方式"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupRentSortChange"
						></my-picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">出售价排序</text>
						<my-picker
							:data="sortData"
							v-model="popupFilterParams.transferPriceSort"
							title="选择出售价排序"
							placeholder="选择排序方式"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupTransferPriceSortChange"
						></my-picker>
					</view> -->
					<view class="filter-item">
						<text class="filter-label">类型</text>
						<my-picker
							:data="typeFilterData"
							v-model="popupFilterParams.type"
							title="选择类型"
							placeholder="选择类型"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupTypeChange"
						></my-picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">出租价</text>
						<my-picker
							:data="priceFilterData"
							v-model="popupPriceFilterValue"
							title="选择出租价格范围"
							placeholder="选择出租价格范围"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupPriceChange"
						></my-picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">出售价</text>
						<my-picker
							:data="transferPriceFilterData"
							v-model="popupTransferPriceFilterValue"
							title="选择出售价格范围"
							placeholder="选择出售价格范围"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupTransferPriceChange"
						></my-picker>
					</view>
					
					<view class="filter-item">
						<text class="filter-label">面积</text>
						<my-picker
							:data="areaFilterData"
							v-model="popupAreaFilterValue"
							title="选择面积范围"
							placeholder="选择面积范围"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupAreaChange"
						></my-picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">区域</text>
						<my-picker
							:data="regionFilterData"
							v-model="popupFilterParams.streetName"
							title="选择区域"
							placeholder="选择区域"
							:clearable="true"
							class="filter-picker"
							@change="handlePopupRegionChange"
						></my-picker>
					</view>
				</view>
				<view class="filter-popup-footer">
					<view class="reset-btn" @click="resetPopupFilter">重置</view>
					<view class="confirm-btn" @click="confirmPopupFilter">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 房源列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="house-list">
				<view class="house-row">
					<view class="house-item" v-for="(item, index) in houseList" :key="index" @click="goToDetail(item)">
						<view class="house-img-container">
							<image class="house-img" :src="getImageUrl(item.imageUrl)" mode="aspectFill"></image>
							<view class="status-badge" :class="getStatusClass(item.assetStatus)">
								{{getAssetStatusName(item.assetStatus)}}
							</view>
						</view>
						<view class="house-info">
							<view class="house-name">{{item.name}}</view>
							<view class="house-area">{{item.area}}</view>
							<view class="house-price-box">
								<view class="house-price">
									<text v-if="shouldShowRentPrice(item)">出租价格:{{item.rent}}</text>
									<text v-if="shouldShowTransferPrice(item)" class="transfer-price">出售价格:{{item.transferPrice}}</text>
								</view>
								<view class="house-tag" :class="getTagClass(item.type)">{{getTypeName(item.type)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</my-page>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import MyPage from '@/components/MyPage.vue'
import MyPicker from '@/components/MyPicker.vue'
import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue'
import { getAssetList } from '@/api/assets'
import { getDictData, getHomeCategories } from '@/api/system'
import { getBaseUrl } from '@/utils/request'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) 
// 搜索栏点击
const handleSearch = () => {
	uni.navigateTo({
		url: '/pages/asset/index?isTab=false'
	})
}

// 分类数据
const categoryList = ref([])

// 初始化分类数据
const initCategoryData = async () => {
	try {
		// 获取分类数据
		const result = await getHomeCategories(20)
		if (result.code === 200 && result.data) {
			// 映射字典数据到分类格式
			categoryList.value = result.data.map(item => ({
				name: item.dictLabel,
				icon: item.imageUrl ? (import.meta.env.VITE_APP_BASE_API + item.imageUrl) : ``,
				type: parseInt(item.dictValue)
			}))
		}
	} catch (error) {
		console.error('加载分类数据失败', error)
		// 使用默认分类（兜底处理）
		categoryList.value = [
		]
	}
}

// 根据类型获取图标名称
const getTypeIconName = (type) => {
	const iconNames = {
		'0': 'shangpu',
		'1': 'zhuzhai',
		'2': 'bangong',
		'3': 'changfang',
		'4': 'cangku'
	}
	return iconNames[type] || 'other'
}

// 处理图片URL
const getImageUrl = (imageUrl) => {
	if (!imageUrl) return '/static/images/suoluetu.png'
	
	// 分割图片URL，取第一个
	const firstImage = imageUrl.split(',')[0]
	
	// 检查是否已包含http
	if (firstImage.startsWith('http')) {
		return firstImage
	}
	
	// 拼接基础URL
	return import.meta.env.VITE_APP_BASE_API + firstImage
}

// 筛选数据
const typeFilterData = ref([])
const priceFilterData = ref([])
const transferPriceFilterData = ref([])
const areaFilterData = ref([])
const regionFilterData = ref([])
const assetStatusData = ref([])

// 初始化字典数据
const initDictData = async () => {
	try {
		// 获取资产类型字典
		const assetTypeRes = await getDictData('asset_type')
		if (assetTypeRes.code === 200 && assetTypeRes.data) {
			typeFilterData.value = assetTypeRes.data.map(item => ({
				label: item.dictLabel,
				value: item.dictValue
			}))
			// 添加"不限"选项
			typeFilterData.value.push({ label: '不限', value: null })
		}
		
		// 获取资产状态字典
		const assetStatusRes = await getDictData('asset_status')
		if (assetStatusRes.code === 200 && assetStatusRes.data) {
			assetStatusData.value = assetStatusRes.data.map(item => ({
				label: item.dictLabel,
				value: item.dictValue
			}))
		}
		
		// 获取租金范围字典
		const rentRes = await getDictData('sys_rent')
		if (rentRes.code === 200 && rentRes.data) {
			priceFilterData.value = rentRes.data.map(item => ({
				label: item.dictLabel,
				value: item.dictValue
			}))
			// 添加"不限"选项
			priceFilterData.value.push({ label: '不限', value: '' })
		}
		
		// 获取出让价格范围字典
		const transferPriceRes = await getDictData('sys_transfer_price')
		if (transferPriceRes.code === 200 && transferPriceRes.data) {
			transferPriceFilterData.value = transferPriceRes.data.map(item => ({
				label: item.dictLabel,
				value: item.dictValue
			}))
			// 添加"不限"选项
			transferPriceFilterData.value.push({ label: '不限', value: '' })
		}
		
		// 获取面积范围字典
		const areaRes = await getDictData('sys_area')
		if (areaRes.code === 200 && areaRes.data) {
			areaFilterData.value = areaRes.data.map(item => ({
				label: item.dictLabel,
				value: item.dictValue
			}))
			// 添加"不限"选项
			areaFilterData.value.push({ label: '不限', value: '' })
		}
		
		// 获取区域字典
		const streetRes = await getDictData('sys_street')
		if (streetRes.code === 200 && streetRes.data) {
			regionFilterData.value = streetRes.data.map(item => ({
				label: item.dictLabel,
				value: item.dictValue
			}))
			// 添加"不限"选项
			regionFilterData.value.push({ label: '不限', value: '' })
		}
	} catch (error) {
		console.error('加载字典数据失败', error)
		uni.showToast({
			title: '加载数据失败，请稍后再试',
			icon: 'none'
		})
	}
}

// 筛选值
const priceFilterValue = ref(null)
const areaFilterValue = ref(null)

// 点击分类
const handleCategoryClick = (item) => {
	uni.navigateTo({
		url: `/pages/asset/index?type=${item.type}&isTab=false`
	})
}

// 根据类型获取类型名称
const getTypeName = (type) => {
	// 如果字典数据已加载
	if (typeFilterData.value && typeFilterData.value.length > 0) {
		const typeItem = typeFilterData.value.find(item => item.value == type)
		if (typeItem) return typeItem.label
	}
	
	// 默认返回类型对应的名称（兜底处理）
	const typeNames = {
		0: '商铺',
		1: '住宅',
		2: '办公',
		3: '厂房',
		4: '仓库'
	}
	return typeNames[type] || '其他'
}

// 根据类型获取标签样式类
const getTagClass = (type) => {
	const tagClasses = {
		0: 'tag-shop',
		1: 'tag-house',
		2: 'tag-office',
		3: 'tag-factory',
		4: 'tag-warehouse'
	}
	return tagClasses[type] || 'tag-other'
}

// 根据状态值获取状态名称
const getAssetStatusName = (status) => {
	// 优先从字典数据中查找
	if (assetStatusData.value && assetStatusData.value.length > 0) {
		const statusItem = assetStatusData.value.find(item => item.value == status)
		if (statusItem) return statusItem.label
	}
	
	// 默认状态映射（兜底处理）
	const statusNames = {
		'0': '闲置中',
		'1': '展示中', 
		'2': '已租赁'
	}
	return statusNames[status] || '未知状态'
}

// 根据状态值获取状态样式类
const getStatusClass = (status) => {
	const statusClasses = {
		'0': 'status-idle',
		'1': 'status-display',
		'2': 'status-rented'
	}
	return statusClasses[status] || 'status-unknown'
}

// 排序选项数据
const sortData = ref([
	{ label: '升序', value: 'asc' },
	{ label: '降序', value: 'desc' },
	{ label: '不限', value: null }
])

// 修改 filterParams
const filterParams = reactive({
	type: '',
	priceMin: '',
	priceMax: '',
	transferPriceMin: '',
	transferPriceMax: '',
	areaMin: '',
	areaMax: '',
	streetName: '',
	orderByColumn: ''
})

// 弹窗相关的变量
const popupPriceFilterValue = ref(null)
const popupAreaFilterValue = ref(null)
const popupTransferPriceFilterValue = ref(null)

// 修改 popupFilterParams
const popupFilterParams = reactive({
	type: '',
	priceMin: '',
	priceMax: '',
	transferPriceMin: '',
	transferPriceMax: '',
	areaMin: '',
	areaMax: '',
	streetName: '',
	rentSort: null,
	transferPriceSort: null
})

// 筛选变化处理函数
const handleTypeChange = (value) => {
	// 如果是字符串值，需要转换为数字
	if (value !== null && typeof value === 'string') {
		filterParams.type = parseInt(value.values[0])
	} else {
		filterParams.type = value.values[0]
	}
	// 同步更新弹窗的类型值
	popupFilterParams.type = filterParams.type
	refreshList()
}

const handlePriceChange = (value) => {
	if (value.values[0]) {
		const [min, max] = value.values[0].split('-')
		filterParams.priceMin = min
		filterParams.priceMax = max.length ? max : ''
	} else {
		filterParams.priceMin = ''
		filterParams.priceMax = ''
	}
	refreshList()
}

const handleAreaChange = (value) => {
	if (value.values[0]) {
		const [min, max] = value.values[0].split('-')
		filterParams.areaMin = min
		filterParams.areaMax = max.length ? max : ''
	} else {
		filterParams.areaMin = ''
		filterParams.areaMax = ''
	}
	refreshList()
}

const handleRegionChange = () => {
	refreshList()
}

// 刷新列表
const refreshList = () => {
	// 重置列表为第一页，并重新加载数据
	if (mescrollRef.value) {
		mescrollRef.value.mescroll.resetUpScroll()
	}
}

// 房源列表
const houseList = ref([])

// mescroll实例对象
const mescrollRef = ref()


const upOption = {
	use: true, // 是否启用上拉加载
	auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调
	page: {
		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
		size: 20 // 每页数据的数量
	},
	empty: {
		use: true, // 是否显示空布局
		tip: '暂无相关资产' // 提示
	}
}



// 上拉加载的回调
const upCallback = (mescroll) => {
	// 加载第mescroll.num页的数据
	loadData(mescroll.num, mescroll.size, (arr, totalSize) => {
		// 如果是第一页需手动制空列表
		if (mescroll.num === 1) houseList.value = []
		// 追加新数据
		houseList.value = houseList.value.concat(arr)
		// 结束加载，传入总数据量，mescroll会自动判断是否有更多数据
		// 如果arr.length < size，则自动显示无更多数据
		console.log(totalSize)
		mescroll.endSuccess(arr.length, totalSize)
	})
}

// 加载房源数据
const loadData = async (pageNum, pageSize, callback) => {
	try {
		// 构建查询参数
		const params = {
			pageNum,
			pageSize,
			type: filterParams.type,
			rentMin: filterParams.priceMin,
			rentMax: filterParams.priceMax,
			transferPriceMin: filterParams.transferPriceMin,
			transferPriceMax: filterParams.transferPriceMax,
			areaMin: filterParams.areaMin,
			areaMax: filterParams.areaMax,
			streetName: filterParams.streetName,
			orderByColumn: filterParams.orderByColumn
		}
		
		// 调用API接口获取数据
		const res = await getAssetList(params)
		
		if (res.code === 200) {
			callback(res.rows || [], res.total || 0)
		} else {
			uni.showToast({
				title: res.msg || '加载失败',
				icon: 'none'
			})
			callback([], 0)
		}
	} catch (error) {
		console.error('加载数据失败', error)
		uni.showToast({
			title: '网络异常，请稍后再试',
			icon: 'none'
		})
		callback([], 0)
	}
}

// 跳转详情页
const goToDetail = (item) => {
	uni.navigateTo({
		url: `/pages/asset/detail?id=${item.id}`
	})
}

// 在页面初始化时调用
onMounted(() => {
	initDictData()
	initCategoryData()
})

// 判断是否应该显示出租价格
const shouldShowRentPrice = (item) => {
	const method = item.revitalizationMethod
	const hasRentPrice = item.rent
	
	if (!hasRentPrice) return false
	
	return method === '出租' || method === '租售均可' || method === '先租后让'
}

// 判断是否应该显示出售价格
const shouldShowTransferPrice = (item) => {
	const method = item.revitalizationMethod
	const hasTransferPrice = item.transferPrice
	
	if (!hasTransferPrice) return false
	
	return method === '出售' || method === '租售均可' || method === '先租后让'
}

// 弹窗筛选相关
const filterPopup = ref(null)

// 显示筛选弹窗
const showFilterPopup = () => {
	filterPopup.value.open()
}

// 关闭筛选弹窗
const closeFilterPopup = () => {
	filterPopup.value.close()
}

// 弹窗筛选条件变化处理函数
const handlePopupTypeChange = (value) => {
	if (value !== null && typeof value === 'string') {
		popupFilterParams.type = parseInt(value.values[0])
	} else {
		popupFilterParams.type = value.values[0]
	}
	// 同步更新顶部筛选栏的类型值
	filterParams.type = popupFilterParams.type
}

const handlePopupPriceChange = (value) => {
	if (value.values[0]) {
		const [min, max] = value.values[0].split('-')
		popupFilterParams.priceMin = min
		popupFilterParams.priceMax = max.length ? max : ''
	} else {
		popupFilterParams.priceMin = ''
		popupFilterParams.priceMax = ''
	}
}

const handlePopupAreaChange = (value) => {
	if (value.values[0]) {
		const [min, max] = value.values[0].split('-')
		popupFilterParams.areaMin = min
		popupFilterParams.areaMax = max.length ? max : ''
	} else {
		popupFilterParams.areaMin = ''
		popupFilterParams.areaMax = ''
	}
}

const handlePopupRegionChange = () => {
	// 区域变化时不需要立即刷新
}

// 添加出租价格排序处理函数
const handlePopupRentSortChange = (value) => {
	popupFilterParams.rentSort = value.values[0]
	updateOrderByColumn()
}

// 添加出售价格排序处理函数
const handlePopupTransferPriceSortChange = (value) => {
	popupFilterParams.transferPriceSort = value.values[0]
	updateOrderByColumn()
}

// 更新排序字段
const updateOrderByColumn = () => {
	const orders = []
	if (popupFilterParams.rentSort) {
		orders.push(`rent ${popupFilterParams.rentSort}`)
	}
	if (popupFilterParams.transferPriceSort) {
		orders.push(`transfer_price ${popupFilterParams.transferPriceSort}`)
	}
	popupFilterParams.orderByColumn = orders.join(', ')
}

// 重置弹窗筛选条件
const resetPopupFilter = () => {
	popupFilterParams.type = ''
	popupFilterParams.priceMin = ''
	popupFilterParams.priceMax = ''
	popupFilterParams.transferPriceMin = ''
	popupFilterParams.transferPriceMax = ''
	popupFilterParams.areaMin = ''
	popupFilterParams.areaMax = ''
	popupFilterParams.streetName = ''
	popupFilterParams.rentSort = null
	popupFilterParams.transferPriceSort = null
	popupFilterParams.orderByColumn = ''
	popupPriceFilterValue.value = null
	popupTransferPriceFilterValue.value = null
	popupAreaFilterValue.value = null
}

// 确认弹窗筛选条件
const confirmPopupFilter = () => {
	// 将弹窗的筛选条件应用到主筛选条件
	Object.assign(filterParams, popupFilterParams)
	priceFilterValue.value = popupPriceFilterValue.value
	areaFilterValue.value = popupAreaFilterValue.value
	// 刷新列表
	refreshList()
	// 关闭弹窗
	closeFilterPopup()
}

// 添加出售价格变化处理函数
const handlePopupTransferPriceChange = (value) => {
	if (value.values[0]) {
		const [min, max] = value.values[0].split('-')
		popupFilterParams.transferPriceMin = min
		popupFilterParams.transferPriceMax = max.length ? max : ''
	} else {
		popupFilterParams.transferPriceMin = ''
		popupFilterParams.transferPriceMax = ''
	}
}

// 监听filterParams.type的变化
watch(() => filterParams.type, (newVal) => {
	popupFilterParams.type = newVal
})

// 监听popupFilterParams.type的变化
watch(() => popupFilterParams.type, (newVal) => {
	filterParams.type = newVal
})
</script>

<style lang="scss">
.filter-popup-content {
		.filter-picker {
			flex: 1 !important;
			.trigger-content {
				max-width: 100% !important;
			}
			.picker-trigger {
				justify-content: flex-start;
			}
		}
	}
</style>

<style lang="scss" scoped>
@import '@/static/styles/index.scss';
::v-deep .my_page {
	.my_header {
		background: linear-gradient(to right, #2979ff, #1565C0);
		.wrap {
			background: linear-gradient(to right, #2979ff, #1565C0);
		}
	}
}
.search-box {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: none;
	
	.search-input-container {
		flex: 1;
		height: 72rpx;
		background-color: #fff;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		
		.iconfont {
			color: #999;
			font-size: 32rpx;
			margin-right: 10rpx;
		}
		
		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #555555;
		}
		.search-btn {
			margin-left: 20rpx;
			color: #fff;
			font-size: 30rpx;
			background: rgba(4, 96, 242, 1);
			width: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			margin-right: -20rpx;
		}
	}
	
	
}

.banner {
	position: relative;
	background: linear-gradient(to right, #2979ff, #1565C0);
	padding: 30rpx 0 30rpx 30rpx;
	
	.banner-content {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.slogan-container {
			flex: 1;
			margin-bottom: 60rpx;
			.slogan {
				display: block;
				color: #fff;
				font-size: 40rpx;
				font-weight: bold;
				line-height: 1.4;
			}
			
			.sub-slogan {
				display: block;
				color: rgba(255, 255, 255, 0.8);
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
		
		.banner-img {
			width: 340rpx;
		}
	}
}

.category-card {
	position: relative;
	margin: -70rpx 30rpx 20rpx;
	border-radius: 20rpx;
	background-color: #fff;
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	z-index: 10;
	overflow: hidden;
	
	.category-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 30rpx 20rpx;
		
		.category-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
			margin-bottom: 30rpx;
			
			.category-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}
			
			.category-name {
				font-size: 26rpx;
				color: #333;
				text-align: center;
			}
			
			.iconfont {
				font-size: 24rpx;
				color: #999;
				margin-top: 4rpx;
			}
		}
	}
}

::v-deep .filter-bar {
	display: flex;
	justify-content: space-around;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #333;
	border-bottom: 1rpx solid #f2f2f2;
	margin-bottom: 20rpx;
	background-color: none;
	.filter-picker {
		flex: 1;
	}
	.filter {
		margin-right: 40rpx;
		color: #999999;
	}
}

.filter-popup {
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding-bottom: env(safe-area-inset-bottom);
	
	.filter-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		
		.close-btn {
			color: #666;
			font-size: 28rpx;
			font-weight: normal;
			padding: 10rpx 20rpx;
			background: #f5f5f5;
			border-radius: 30rpx;
		}
	}
	
	.filter-popup-content {
		padding: 20rpx 30rpx;
		max-height: 70vh;
		overflow-y: auto;
		
		.filter-item {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			background: #f8f9fc;
			padding: 16rpx 20rpx;
			border-radius: 12rpx;
			
			.filter-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				height: 60rpx;
				line-height: 60rpx;
				margin-right: 20rpx;
				width: 150rpx;
				font-weight: 500;
			}

			.filter-picker {
				flex: 1;
				
				::v-deep .picker-trigger {
					background: #fff;
					height: 60rpx;
					border-radius: 30rpx;
					padding: 0 20rpx;
					border: 1rpx solid #e5e7eb;
					
					.trigger-label {
						color: #666;
						font-size: 26rpx;
					}
					
					.placeholder {
						color: #999;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	
	.filter-popup-footer {
		display: flex;
		padding: 20rpx 30rpx 30rpx;
		border-top: 1rpx solid #f5f5f5;
		background: #fff;
		position: sticky;
		bottom: 0;
		
		.reset-btn, .confirm-btn {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			font-size: 30rpx;
			margin: 0 10rpx;
			transition: all 0.3s;
		}
		
		.reset-btn {
			background-color: #f5f7fa;
			color: #666;
			border: 1rpx solid #e5e7eb;
			
			&:active {
				background-color: #e5e7eb;
			}
		}
		
		.confirm-btn {
			background: linear-gradient(to right, #2979ff, #1565C0);
			color: #fff;
			box-shadow: 0 6rpx 20rpx rgba(41, 121, 255, 0.2);
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 10rpx rgba(41, 121, 255, 0.2);
			}
		}
	}
}

.filter-popup-content {
	.filter-picker {
		flex: 1 !important;
		.trigger-content {
			max-width: 100% !important;
		}
		.picker-trigger {
			justify-content: flex-start;
		}
	}
}

.house-list {
	padding: 0 20rpx 20rpx;
	
	.house-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.house-item {
		width: 48%;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		
		.house-img-container {
			position: relative;
			width: 100%;
			height: 200rpx;
		}
		
		.house-img {
			width: 100%;
			height: 100%;
			border-radius: 8rpx 8rpx 0 0;
		}
		
		.house-info {
			padding: 16rpx;
			position: relative;
			
			.house-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
			}
			
			.house-area {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.house-price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.house-price {
				font-size: 28rpx;
				color: #ff5a5f;
				font-weight: bold;
				margin-bottom: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				flex-direction: column;
				
				.transfer-price {
					color: #ff9500;
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}
			
			.house-tag {
				display: inline-block;
				padding: 4rpx 12rpx;
				font-size: 20rpx;
				border-radius: 4rpx;
				
				&.tag-shop {
					background-color: rgba(52, 195, 143, 0.1);
					color: #34c38f;
				}
				
				&.tag-house {
					background-color: rgba(241, 180, 76, 0.1);
					color: #f1b44c;
				}
				
				&.tag-office {
					background-color: rgba(80, 165, 241, 0.1);
					color: #50a5f1;
				}
				
				&.tag-factory {
					background-color: rgba(223, 71, 89, 0.1);
					color: #df4759;
				}
				
				&.tag-warehouse {
					background-color: rgba(102, 88, 221, 0.1);
					color: #6658dd;
				}
				
				&.tag-other {
					background-color: rgba(100, 100, 100, 0.1);
					color: #646464;
				}
			}
		}
	}
}

// 状态标签样式
.status-badge {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #fff;
	z-index: 10;
	
	&.status-idle {
		background-color: #52c41a; // 绿色 - 闲置中
	}
	
	&.status-display {
		background-color: #1890ff; // 蓝色 - 展示中
	}
	
	&.status-rented {
		background-color: #ff4d4f; // 红色 - 已租赁
	}
	
	&.status-unknown {
		background-color: #d9d9d9; // 灰色 - 未知状态
		color: #666;
	}
}
</style>
